<template>
	<view>
		<!-- 标题栏 -->
		<head-navbar :back="true" :bgColor="'#fff'">
			<view class="">创建订单</view>
		</head-navbar>
		<!-- 地址 -->
		<navigator url="/pages/my/myService/setting/address/address?type=create" class="address-section">
			<view class="order-content" v-if="noAddress">
				<text v-if="noAddress">添加收货地址</text>
				<view class="right iconfont icon-fanhui"></view>
			</view>
			<view class="order-content">
				<image src="../../../../static/img/user.png" mode="" class="userImg"></image>
				<view class="cen" >
					<view class="top">
						<text class="name">{{addressData.consigneeName}}</text>
						<text class="mobile">{{addressData.consigneePhone}}</text>
					</view>
					<view class="address">{{addressData.region}}{{addressData.detailAddress}} </view>
				</view>
				<view class="right iconfont icon-fanhui"></view>
			</view>
		</navigator>
		<!-- -->
		
		
		
		<!--  -->
		<view class="goods-section"  v-for="(item,index) in goodsData">
			<view class="g-header b-b">
				<image class="logo" :src="item.merchantHead"></image>
				<text class="name">{{item.merchantName}}</text>
			</view>
			<!-- 商品列表 -->
			<view>
			<view class="g-item">
				<image :src="item.goodsSpecsImg"></image>
				<view class="right">
					<text class="title clamp">{{item.goodsName}}</text>
					<view class="price-box">
						<view class="left">
							<text class="price">￥{{item.price}}</text>
						</view>
						<text class="number">x {{item.num}}</text>
					</view>
					<text class="spec">规格：{{item.goodsSpecsName}}</text>
				</view>
			</view>
			</view>
			<view class="size-box">
				<view class="left">
					<text class="tit">运费：</text>
				</view>
				<text class="number">{{freight}}</text>
			</view>
		</view>

		<view class="cashTitle">
			交易方式
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="payType = 1">
				<view class="cell-tit clamp">
					<image src="../../../../static/img/hongbao.png" mode=""></image>
					<text class="cell-tit clamp">支付宝</text>
				</view>
				<image src="../../../../static/img/xuanzhong1.png" mode="" v-if="payType == 1"></image>
				<image src="../../../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<view class="yt-list-cell b-b" @click="payType = 3">
				<view class="cell-tit clamp">
					<image src="../../../../static/img/doudou.png" mode=""></image>
					<text class="cell-tit clamp">余额</text>
				</view>
				<image src="../../../../static/img/xuanzhong1.png" mode="" v-if="payType == 3"></image>
				<image src="../../../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<view class="yt-list-cell b-b" @click="payType = 5">
				<view class="cell-tit clamp">
					<image src="../../../../static/img/money.png" mode=""></image>
					<text class="cell-tit clamp">闲豆</text>
				</view>
				<image src="../../../../static/img/xuanzhong1.png" mode=" " v-if="payType == 5"></image>
				<image src="../../../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<!-- <view class="yt-list-cell b-b" @click="payType = 4">
				<view class="cell-tit clamp">
					<text class="iconfont icon-USDT usdt"></text>
					<text class="cell-tit clamp">USDT</text>
				</view>
				<image src="../../../../static/img/xuanzhong1.png" mode="" v-if="payType == 4"></image>
				<image src="../../../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view> -->
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款:</text>
				<text class="price">￥{{price}}</text>
			</view>
			<text class="submit" @click="submit">提交订单</text>
		</view>

		<pwd-popup ref="pwdPopup" @sendData="pwdData"></pwd-popup>
		<tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>
	</view>
</template>

<script>
	import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue";
	import {cartCreateOrder,createOrder,selfGoodsOrder} from '@/api/order/index'
	import * as api from '@/api/user/address.js';
	import {getFreight} from '@/api/goods/index';
	export default {
		components: {
			"tfgg-verify":tfggVerify
		},
		data() {
			return {
				goodsData:[],
				type:0,
				price:0,
				data: '',
				ids:null,
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, 
				couponList: [{
						title: '新用户专享优惠券',
						price: 5,
					},
					{
						title: '庆五一发一波优惠券',
						price: 10,
					},
					{
						title: '优惠券优惠券优惠券优惠券',
						price: 15,
					}
				],
				addressData: {},
				noAddress:false,
				goodsId:"",
				goodsSpecsId:"",
				goodsType:'',
				userAddressId:'',
				orderType:null,
				data:'',
				freight: 0
			}
		},
		onLoad(option) {
			this.goodsId = option.goodsId
			this.goodsData = uni.getStorageSync('saleData')
			console.log(this.goodsData)
			this.goodsData.forEach(e=>{
				this.price = e.price * e.num
			})
			this.getList()
		},
		methods: {
			getFreight2(id) {
				getFreight({
					goodsId: this.goodsId,
					addressId: id,
					quantity:this.goodsData[0].num
				}).then(res => {
					this.freight = res.data.obj
				}).catch(err => {
			
				})
			},
			async getList() {
				let param = {
					pageNum:1,
					pageSize:20
				}
				try{
					const ret = await api.getUserAddressList(param);
					if( ret.data.obj.length>0){
						this.addressData = ret.data.obj[0]
						let id = ret.data.obj[0].id
						this.getFreight2(id);
					}else{
						this.noAddress = true
					}
				}catch(error){
					
				}
			},
			/* 校验结果回调函数 */
			verifyResult(res){
				if(res){
					this.$refs.verifyElement.reset();//校验成功重置插件
					uni.showLoading({
					    title: '加载中'
					});
					this.$refs.pwdPopup.show();
					uni.hideLoading()
				}
				console.log(res);
			},
			submit() {
				var key = Object.keys(this.addressData);
				if(key.length == 0){
					uni.showToast({
						title:"请选择收货地址",
						icon:'none'
					})
					return
				}
				if(this.payType == 1){
					selfGoodsOrder(
					{
						goodsId:this.goodsId,
						goodsSpecsId:this.goodsData[0].goodsSpecsId,
						userAddressId:this.addressData.id,
						quantity:this.goodsData[0].num,
						tradePwd:this.data,
						payType:this.payType,
					}).then(res=>{
						if(this.payType == 1) {
							uni.requestPayment({
							    provider: 'alipay',
							    orderInfo: res.data.obj, //微信、支付宝订单数据
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
									setTimeout(function(){
										uni.navigateTo({
											url: '/pages/order/payScuess'
										})
									},500)
							    },
							    fail: function (err) {
							       uni.showToast({
							       	   title:'支付失败',
									   icon:'none'
							       })
							    }
							});
						}else{
							uni.navigateTo({
								url:'/pages/order/payScuess'
							})
						}
					})
				}else{
					this.$refs.verifyElement.show();
				}
			},
			pwdData(data) {
				// pwd
				this.data = data;
				this.$refs.pwdPopup.hide();
				uni.showLoading({
				    title: '支付中'
				});
					selfGoodsOrder(
					{
						goodsId:this.goodsId,
						goodsSpecsId:this.goodsData[0].goodsSpecsId,
						userAddressId:this.addressData.id,
						quantity:this.goodsData[0].num,
						tradePwd:this.data,
						payType:this.payType,
					}).then(res=>{
						if(this.payType == 1) {
							uni.requestPayment({
							    provider: 'alipay',
							    orderInfo: res.data.obj, //微信、支付宝订单数据
							    success: function (res) {
							        console.log('success:' + JSON.stringify(res));
									setTimeout(function(){
										uni.navigateTo({
											url: '/pages/order/payScuess'
										})
									},500)
							    },
							    fail: function (err) {
							       uni.showToast({
							       	   title:'支付失败',
									   icon:'none'
							       })
							    }
							});
						}else{
							uni.navigateTo({
								url:'/pages/order/payScuess'
							})
						}
					})
				
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	@import './createOrder.scss';
</style>
